<template>
    <view class="container">
        <view class="orders-switch">
            <view :class="'item ' + (showType == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
                <view class="txt">发起的团购</view>
            </view>
            <view :class="'item ' + (showType == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
                <view class="txt">参加的团购</view>
            </view>
        </view>
        <view class="no-order" v-if="orderList.length <= 0">
            <view class="c">
                <text>尚未参加任何团购</text>
            </view>
        </view>

        <view class="orders">
            <navigator :url="'../grouponDetail/grouponDetail?id=' + item.id" class="order" open-type="navigate" v-for="(item, index) in orderList" :key="index">
                <view class="h">
                    <van-tag type="primary" v-if="item.groupon.status === 1">开团中</van-tag>
                    <van-tag type="success" v-if="item.groupon.status === 2">开团成功</van-tag>
                    <van-tag type="danger" v-if="item.groupon.status === 3">开团失败</van-tag>
                    <van-tag round type="warning" v-if="!item.isCreator">{{ item.creator }}发起</van-tag>
                </view>

                <view class="h">
                    <view class="l">订单编号：{{ item.orderSn }}</view>
                    <view class="r">{{ item.orderStatusText }}</view>
                </view>

                <view class="j">
                    <view class="l">团购立减：￥{{ item.rules.discount }}</view>
                    <view class="r">参与时间：{{ item.groupon.addTime }}</view>
                </view>

                <view class="i">
                    <view class="l">团购要求：{{ item.rules.discountMember }}人</view>
                    <view class="r">当前参团：{{ item.joinerCount }}人</view>
                </view>

                <view class="goods" v-for="(gitem, index1) in item.goodsList" :key="index1">
                    <view class="img">
                        <image :src="gitem.picUrl"></image>
                    </view>

                    <view class="info">
                        <text class="name">{{ gitem.goodsName }}</text>
                        <text class="number">共{{ gitem.number }}件商品</text>
                    </view>

                    <view class="status"></view>
                </view>

                <view class="b">
                    <view class="l">实付：￥{{ item.actualPrice }}</view>
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            orderList: [],
            showType: 0,

            gitem: {
                picUrl: '',
                goodsName: '',
                number: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getOrderList();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.getOrderList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getOrderList() {
            let that = this;
            util.request(api.GroupOnMy, {
                showType: that.showType
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        orderList: res.data.list
                    });
                }
            });
        },

        switchTab: function (event) {
            let showType = event.currentTarget.dataset.index;
            this.setData({
                showType: showType
            });
            this.getOrderList();
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.orders-switch {
    width: 100%;
    background: #fff;
    height: 84rpx;
    border-bottom: 1px solid #a78845;
}

.orders-switch .item {
    display: inline-block;
    height: 82rpx;
    width: 50%;
    padding: 0 15rpx;
    text-align: center;
}

.orders-switch .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #333;
    font-size: 30rpx;
    width: 100%;
}

.orders-switch .item.active .txt {
    color: #a78845;
    border-bottom: 4rpx solid #a78845;
}

.no-order {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.no-order .c {
    width: 100%;
    height: auto;
    margin-top: 400rpx;
}

.no-order .c image {
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 258rpx;
    height: 258rpx;
}

.no-order .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 29rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 29rpx;
    color: #999;
}

.orders {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.order {
    margin-top: 20rpx;
    background: #fff;
}

.order .h {
    height: 83.3rpx;
    line-height: 83.3rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
}

.order .h .l {
    float: left;
    color: #a78845;
    font-size: 26rpx;
}

.order .h .r {
    float: right;
    color: #a78845;
    font-size: 26rpx;
}

.order .i {
    height: 56rpx;
    line-height: 56rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
}

.order .i .l {
    float: left;
    color: #a78845;
    font-size: 26rpx;
}

.order .i .r {
    float: right;
    color: #a78845;
    font-size: 26rpx;
}

.order .j {
    height: 56rpx;
    line-height: 56rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
}

.order .j .l {
    float: left;
    font-size: 26rpx;
    color: #a78845;
}

.order .j .r {
    float: right;
    color: #a78845;
    font-size: 26rpx;
}

.order .goods {
    display: flex;
    align-items: center;
    height: 199rpx;
    margin-left: 31.25rpx;
}

.order .goods .img {
    height: 145.83rpx;
    width: 145.83rpx;
    background: #f4f4f4;
}

.order .goods .img image {
    height: 145.83rpx;
    width: 145.83rpx;
}

.order .goods .info {
    height: 145.83rpx;
    flex: 1;
    padding-left: 20rpx;
}

.order .goods .name {
    margin-top: 30rpx;
    display: block;
    height: 44rpx;
    line-height: 44rpx;
    color: #333;
    font-size: 30rpx;
}

.order .goods .number {
    display: block;
    height: 37rpx;
    line-height: 37rpx;
    color: #666;
    font-size: 25rpx;
}

.order .goods .status {
    width: 105rpx;
    color: #a78845;
    font-size: 25rpx;
}

.order .b {
    height: 103rpx;
    line-height: 103rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .b .l {
    float: left;
}

.order .b .r {
    float: right;
}

.order .b .btn {
    margin-top: 19rpx;
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 28rpx;
    color: #fff;
    background: #a78845;
}
</style>
